import React, { Component } from 'react';
import axios from 'axios';
import { Row, Col } from 'antd';
import Nav from './Nav';
import Menu from './Menu';
import { AddBookForm } from './AddBook';


export default class Home extends Component{

    constructor(props){
        super(props);
        this.state = {'cover_flag': false, 'cover_component': ''};
    }

    componentWillMount(){
        document.title = "在线笔记系统";
    }

    componentDidMount(){
        this.cover_token = PubSub.subscribe('cover_flag', function (topic, message) {  
            this.setState({  
                cover_flag: message  
            });
        }.bind(this));  
        this.cover_component = PubSub.subscribe('cover_component', function (topic, message) {  
            this.setState({  
                cover_component: message  
            });
        }.bind(this));  
    }

    getComponents = () =>{
        let cover_component = this.state.cover_component;
        switch(cover_component){
            case 'AddBook':
                return <AddBookForm/>;
        }
    }

    render() {
        if(!this.state.cover_flag){
            return (
                <div className="box">
                    <Row type="flex">
                        <Col span="1"><Nav/></Col>
                        <Col span="4"><Menu/></Col>
                        <Col span="17">content</Col>
                        <Col span="1">留空</Col>
                    </Row>
                </div>
            );
        }else{
            return(
                <div className="box">
                    {this.getComponents()}
                </div>
            );
        }
    }
}
